<template>
  <div :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "AdvChart",
  props: {
    id: {
      type: String,
      default: 'id'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartType: {
      type: String,
      default: 'line'
    },
    yAxis: {
      type: String,
      default: 'reportDate'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      console.log('chartdata', this.chartData)
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
  },
  methods: {
    initChart() {
      // 表格配对象
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '8%',
          bottom: '18%',
          width: '88%',
          height: '75%'
        },
        legend: {
          data: ['花费', '曝光', '点击', '安装']
        },
        dataset: {
          dimensions: [this.yAxis, 'spend', 'impressions', 'clicks', 'install'],
          source: this.chartData
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            handleSize: 20,//滑动条的 左右2个滑动条的大小
            height: 8,//组件高度
            left: 30, //左边的距离
            right: 40,//右边的距离
            bottom: 10,//右边的距离
            handleColor: '#ddd',//h滑动图标的颜色
            handleStyle: {
              borderColor: "#cacaca",
              borderWidth: "1",
              shadowBlur: 2,
              background: "#ddd",
              shadowColor: "#ddd",
            },
            fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
              //给第一个设置0，第四个设置1，就是垂直渐变
              offset: 0,
              color: '#1eb5e5'
            }, {
              offset: 1,
              color: '#5ccbb1'
            }]),
            backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
            filterMode: 'filter',
            minValueSpan: 5,
            maxValueSpan: 5,
            brushSelect: false
          },
          //下面这个属性是里面拖到
          {
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
          }
        ],
        yAxis: [
          {
            type: 'log'
          }
        ],
        series: [
          {
            name: '花费',
            type: this.chartType,
            barGap: 0,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: '曝光',
            type: this.chartType,
            barGap: 0,
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '点击',
            type: this.chartType,
            barGap: 0,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: '安装',
            type: this.chartType,
            barGap: 0,
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(option)
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
